<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../vue.js"></script>
</head>

<body>
  <!-- v-model是数据双向绑定，数据更改 视图改变 视图改变 数据更改 -->
  <div id="app">
    <h1>{{msg}}</h1>
    <!-- 初次使用 可以省略value 因为默认绑定的就是value -->
    <input type="text" v-model="msg">
    <br>
    <!-- 在复选框中的使用 -->
    <form action="###">
      <!-- 单个选框的使用 一般用作于表单的勾选 -->
      <input type="checkbox" name="isYes" v-model="isYes">是否同意
      <!-- 多个多选框的使用, 一般用作于收集表单数据 放在数组中 -->
      <p>选择你喜欢的dog</p>
      <input type="checkbox" name="dog" value="大佐" v-model="dog">大佐
      <input type="checkbox" name="dog" value="柴桑" v-model="dog">柴桑
      <input type="checkbox" name="dog" value="撒库拉" v-model="dog">撒库拉
    </form>
    <br>
    <!-- 在单选框的使用 单选框无论是几个 只会收集一个值 所以在data中只用书写一个空串就可以 -->
    <form action="###">
      <p>选择你喜欢的动物</p>
      <input type="radio" name="dog" value="大佐" v-model="animal">大佐
      <input type="radio" name="dog" value="柴桑" v-model="animal">柴桑
    </form>
    <br>
    <!-- 在下拉框中的使用 -->
    <!-- 下拉 单选  单个字符串-->
    <select name="dog" v-model="likedog">
      <option value="小黑">小黑</option>
      <option value="小白">小白</option>
      <option value="小花">小花</option>
    </select>
    <!-- 下拉 多选 数组保存-->
    <select name="cat" multiple v-model="likecat">
      <option value="大佐">大佐</option>
      <option value="咪桑">咪桑</option>
      <option value="撒库拉">撒库拉</option>
    </select>
    <br>
    <!-- 在textarea中想要实现数据的双向绑定 则需要使用v-model  -->
    <textarea cols="30" rows="10" v-model="msg"></textarea>
    <!-- 使用插值语法只能实现数据单项绑定 -->
    <textarea cols="30" rows="10">{{msg}}</textarea>
    <br>
    <form action="###">
      <!-- 使用.trim修饰符可以去掉空格 -->
      username: <input type="text" name="username" v-model.trim="userInfo.name">
      <!--输入框是实时收集数据, 使用.lazy修饰符等到输入框失去焦点的时候才会收集数据 类比js的input和change事件-->
      password: <input type="password" name="password" v-model.lazy="userInfo.pas">
      <!-- 使用.number可以数据转为number类型,如果无法转换,则继续保持字符串形式 -->
      phoneNumber: <input type="text" name="phoneNumber" v-model.number="userInfo.num">
      <br>
      <p>选择你喜欢的动物(多选)</p>
      <input type="checkbox" name="dog" v-model="userInfo.dog" value="大佐">大佐
      <input type="checkbox" name="dog" v-model="userInfo.dog" value="喵桑">喵桑
      <input type="checkbox" name="dog" v-model="userInfo.dog" value="撒库拉">撒库拉
    </form>
  </div>
  <script>
    Vue.config.productionTip = false;
    const vm = new Vue({
      el: "#app",
      data() {
        return {
          msg: "hello vue!",
          isYes: true,
          dog: [],
          animal: '',
          likedog: "",
          likecat: [],
          userInfo: {
            name: '',
            pas: '',
            num: null,
            dog: []
          },
        }
      },
      methods: {}
    })
  </script>
</body>

</html>